草庐IT

前端 PM

全部标签

应用开发平台前端集成vue-simple-uploader实现文件分块上传

背景文件的上传是系统的必备功能,Element提供了上传组件upload,也基本能满足常见常用的文件上传功能,特别是应对小型文件(10M以下)的处理。但如果是遇到要求更多更高的场景,上传几百兆甚至上G的视频文件,要求分块上传,能断点续传,显示进度,能暂停,能重试……这时候就显得乏力了。如果基于upload实现,需要附加大量的二次开发,这未必是一种最佳实现方案。这时候,就需要找一找看一看,市面上是否有现成的“轮子”可用了。接下来,分两篇,分别介绍下前端实现和后端实现,今天首先来说下前端那些事儿。技术选型vue-simple-uploader,作者对vue3做了适配。官网https://githu

抛出异常时将异常信息返给前端

 全局异常处理器负责将抛出的异常,以统一的格式返给前端。在这里起主要作用的注解是@RestControllerAdvice。@RestControllerAdvice主要配合@ExceptionHandler使用,统一处理异常情况。1、@RestControllerAdvice注解,可以用于定义@ExceptionHandler、@InitBinder、@ModelAttribute,并应用到所有@RequestMapping中。2、@RestControllerAdvice是组件注解,他使得其实现类能够被classpath扫描自动发现,如果应用是通过MVC命令空间或MVCJava编程方式配置

Lighthouse前端性能分析工具

目录前言使用Lighthouse报告解读使用Chrome中resource(性能)前言我们多数性能测试,基本上针对接口的性能测试,很少涉及到前端页面的性能测试。但影响用户体验的因素除了后端接口数据的返回,还有前端页面的渲染等等。所以我们除了在开发的过程中注意代码的质量,同时还需要专业的网站测试工具辅助,让我们知道自己的网页还有哪些需要更为优化的方面。Lighthouse是一个开源的自动化工具,用于帮助改进网络应用的质量。可将其作为一个Chrome扩展程序运行,或从命令行运行。Lighthouse分析web应用程序和web页面,收集关于开发人员最佳实践的现代性能指标和见解,让开发人员根据生成的评

前端项目自动化部署

一、Git仓库管理项目二、购买云服务器三、搭建服务器环境(重点)四、Jenkins进行自动化部署(重点)提示:本地项目自动化部署流程,如下图一、Git仓库管理项目Git的安装和配置在这里就不做说明了1、首先在Git仓库中创建一个仓库,用来保存本地项目,这里使用Gitee 2、按照上图指示,在本地项目的目录下使用终端将项目push到Git仓库中,如下:二、购买云服务器至于服务器使用阿里云、腾讯云、华为云等都可以,看自己的需求,以阿里云为例,要提前注册阿里云账号1、来到控制台 2、创建实例选择类型和配置,根据个人需求来  3、配置网络安全组这一步在配置安全组事,除了默认的访问端口,另要放开8080

Unity WebGl和前端(Angular)相互调用(含跨域问题)

在Unity官方文档中就已经介绍了Unity和JS相互调用的问题,但是我们实际的应用中往往是使用iframe来展示WebGL。这样不但是webgl和js相互调用的问题,还包含了iframe跨域的问题。我们的项目中前端使用的是angular框架,就以angular为基础来说一下这个问题,当然vue的前端框架应该都一样的原理。首先说一下unity和js相互调用的问题Unity和JS的相互调用unity调用js:1.首先在Unity/Assets/Plugins目录下存放你需要调用的js。2.在Plugins目录下新建文本文档__Internal,后缀改为jslib。 3.编写脚本内容。mergeI

前端(九)——探索微信小程序、Vue、React和Uniapp生命周期

🙂博主:小猫娃来啦🙂文章核心:探索微信小程序、Vue、React和Uniapp生命周期文章目录微信小程序、Vue、React和Uniapp的基本定义和应用领域微信小程序生命周期生命周期概述页面生命周期应用生命周期组件和API的生命周期钩子Vue生命周期生命周期钩子函数响应式监听与生命周期关联生命周期的钩子函数在实际开发中的应用数据获取异步操作页面刷新参数传递与响应动态样式和类绑定生命周期钩子函数的应用扩展React生命周期类组件生命周期方法声命周期方法的触发条件和顺序使用ReactHooks对生命周期的变化与影响依赖项【】的解析useEffect是三合一的hook吗?Uniapp生命周期Uni

浅谈两种前端截图方式:Canvas截图 vs SVG截图

背景如今很多网站都引入截图功能,可用于问题反馈、内容分享等实用需求,而前端截图也不知不觉成为了首选。今天为大家推荐两种前端截图方式,虽然有些局限,但是也能应付大部分项目需求。Canvas截图:html2canvasSVG截图:rasterizehtml原理首先来谈下两种前端截图方式的原理,虽然实现方式不太一致,但是核心思想是相同的。以html2canvas为代表的Canvas截图,通过遍历DOM克隆一份副本,将此副本在Canvas上重新绘制,并根据DOM的样式应用在对应的绘制元素上,再通过Canvas生成图片。转换过程可理解成:DOM→Canvas→Image。以rasterizehtml为代

浅谈两种前端截图方式:Canvas截图 vs SVG截图

背景如今很多网站都引入截图功能,可用于问题反馈、内容分享等实用需求,而前端截图也不知不觉成为了首选。今天为大家推荐两种前端截图方式,虽然有些局限,但是也能应付大部分项目需求。Canvas截图:html2canvasSVG截图:rasterizehtml原理首先来谈下两种前端截图方式的原理,虽然实现方式不太一致,但是核心思想是相同的。以html2canvas为代表的Canvas截图,通过遍历DOM克隆一份副本,将此副本在Canvas上重新绘制,并根据DOM的样式应用在对应的绘制元素上,再通过Canvas生成图片。转换过程可理解成:DOM→Canvas→Image。以rasterizehtml为代

【前端进阶】前端安全:从入门到实践

前端安全:从入门到实践前言:一、前端安全的基本概念1.黑客攻击2.输入验证3.输出编码4.加密二、前端安全的常见问题1.XSS攻击a、XSS攻击分类:b、防御XSS攻击的有效措施:2.CSRF攻击a、一个CSRF攻击包含的具体步骤:b、防御CSRF攻击的有效措施:3.点击劫持攻击a、点击劫持攻击的流程b、防御点击劫持攻击的有效措施:三、前端安全的实践方案1.应用安全框架和工具2.客户端验证和服务器端验证3.监控和日志记录4.安全文档和培训总结前言:Web应用程序的广泛使用,使得Web安全变得越来越重要。随着Web技术的不断发展和Web应用程序的复杂性增加,越来越多的前端安全漏洞受到广泛关注。为

前端安全之常见漏洞及防御

随着项目复杂度的提升以及用户体量的增大,前端安全变得越来越重要。平时系统运行正常,一旦出现安全问题,轻者部门扣分,严重的可能对公司造成严重损失。了解一些常见漏洞,平时开发时注意,防患于未然。一.漏洞分类分类特点跨站脚本攻击任意内容在展示到页面之前,对内容中的特殊字符进行转义,避免产生XSS跨站脚本攻击等前端漏洞。跨站请求伪造网站必须部署防御CSRF攻击的解决方案,每个接口都需要校验Referer和csrf_token。重要接口需要对重放攻击进行防御服务端请求伪造程序中如有对外发送请求的功能,必须严格限制发送的目标和内容的类型;对于只需要请求公网的功能点,必须限制其向内网发送请求。任意文件读取程